define([
    'text!templates/map/controls/buttonsBar.html'
], function (HTMLTemplate) {

    var view = Backbone.View.extend({
        el: $("#main-content"),
        render: function () {

            var template = Handlebars.compile(HTMLTemplate);
            var html = template();
            this.$el.html(html);

            this.addHandlers();



        },
        addHandlers: function () {
            var _this = this;


            // select  handlers
            $(".leaflet-buttonbar .btn-toolbar button.selector").click(function () {
                _this.unselectObjectButtons();
                $(this).addClass("selected");

                var key = $(this).attr("data-action");
                $("#projectMap").trigger("setMode", [key, ""]);

            });


            $(".leaflet-buttonbar .btn-toolbar button.selector").on("dblclick", function () {
                $("#projectMap").trigger("setPersistMode");
            });



            // markers handlers
            $(".leaflet-buttonbar .btn-toolbar button.marker").click(function () {
                _this.unselectObjectButtons();
                $(this).addClass("selected");

                var key = $(this).attr("data-action");
                $("#projectMap").trigger("setMode", [key, "crosshair"]);
            });


            // links handlers
            $(".leaflet-buttonbar .btn-toolbar button.link").click(function () {
                _this.unselectObjectButtons();
                $(this).addClass("selected");

                var key = $(this).attr("data-action");
                $("#projectMap").trigger("setMode", [key]);

            });


        },
        updateMode: function (mode) {
            this.unselectObjectButtons();
            $(".leaflet-buttonbar .btn-toolbar button.selector[data-action='" + mode + "']").addClass("selected");

        },
        unselectObjectButtons: function () {
            $(".leaflet-buttonbar .btn-toolbar button.marker").removeClass("selected");
            $(".leaflet-buttonbar .btn-toolbar button.selector").removeClass("selected");
            $(".leaflet-buttonbar .btn-toolbar button.link").removeClass("selected");
        },

    });
    return view;
});